<template>
	<view class="pay-type">
		<view class="title">选择支付方式</view>
		<radio-group class="type-list" @change="onChange">
			<label class="type-item" v-for="(item, index) in payTypes" :key="index">
				<uni-icons :type="item.icon" :color="item.color" size="64"></uni-icons>
				<view class="info">
					<view class="bd">
						<view class="name">{{ item.name }}</view>
						<view class="desc" v-if="item.desc">{{ item.desc }}</view>
					</view>
				</view>
				<radio class="check" :checked="item.id == selected" color="#0058b2" :value="item.name" />
			</label>
		</radio-group>
	</view>
</template>

<script setup>
	import util from '@/utils/util';
	import cache from '@/utils/cache';
	import {
		ref,
		reactive,
		toRefs,
	} from 'vue';

	defineOptions({
		name: 'gyd-pay-type'
	});

	const props = defineProps({
		order_type: {
			type: String,
			default: ''
		},
	});

	const emits = defineEmits(['change']);

	let selected = ref('wxpay');

	// #ifdef APP-PLUS
	let payTypes = ref([{
			name: '微信支付',
			desc: '推荐使用微信支付',
			icon: 'wx',
			id: 'wxpay',
			color: '#0bcb2b'
		},
		{
			name: '支付宝支付',
			desc: '',
			icon: 'zhifubao',
			id: 'alipay',
			color: '#18a3ee'
		},
		{
			name: '余额支付',
			desc: '账户余额还剩120.00元',
			icon: 'zhifubao',
			id: 'yue',
			color: '#ff900b'
		},
	]);
	// #endif

	// #ifdef H5 || MP-WEIXIN
	let payTypes = ref([{
		name: '微信支付',
		desc: '推荐使用微信支付',
		icon: 'wx',
		id: 'wxpay',
		color: '#0bcb2b'
	}]);
	// #endif

	function onChange(e) {
		let item = payTypes.find(item => item.name == e.detail.value);
		emits('change', item);
	}
</script>

<style lang="scss">
	.pay-type {
		background-color: #fff;

		.title {
			padding: $m24;
			font-size: $font-32;
			color: $main-color;
			font-weight: bold;
		}

		.type-list {
			padding: 0 $m24;

			.type-item {
				@include f-between;
				padding: $m24 0;
				border-bottom: 1rpx solid lighten($border-color, 6%);

				.info {
					flex: 1;
					margin: 0 $m12;

					.name {
						color: $main-color;
					}

					.desc {
						margin-top: $m8;
						font-size: $font-24;
						color: $tips-color;
					}
				}

				.check {
					transform: scale(0.8);
				}
			}
		}
	}
</style>